<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useDark, useToggle } from '@vueuse/core';
import { ElButton, ElCard, ElTag, ElDivider, ElSpace, ElSwitch } from 'element-plus';
import * as echarts from 'echarts';
import { debounce } from 'lodash-es';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

// 扩展dayjs插件
dayjs.extend(relativeTime);

// Props
defineProps<{ msg?: string }>();

// VueUse - 暗黑模式
const isDark = useDark();
const toggleDark = useToggle(isDark);

// 响应式数据
const count = ref(0);
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));

// 计算属性
const doubleCount = computed(() => count.value * 2);

// 防抖函数示例
const debouncedIncrement = debounce(() => {
  count.value++;
}, 300);

// ECharts 图表
const chartRef = ref<HTMLDivElement>();
let chart: echarts.ECharts;

// 技术栈列表
const techStack = [
  { name: 'Vue 3', color: '#4FC08D', description: '渐进式JavaScript框架' },
  { name: 'TypeScript', color: '#3178C6', description: '类型安全的JavaScript' },
  { name: 'Vite', color: '#646CFF', description: '下一代前端构建工具' },
  { name: 'Vue Router', color: '#4FC08D', description: '官方路由管理器' },
  { name: 'Pinia', color: '#FFD93D', description: '状态管理库' },
  { name: 'Element Plus', color: '#409EFF', description: 'Vue 3 UI组件库' },
  { name: 'VueUse', color: '#41B883', description: 'Vue组合式API工具集' },
  { name: 'TailwindCSS', color: '#06B6D4', description: '原子化CSS框架' },
  { name: 'Sass', color: '#CC6699', description: 'CSS预处理器' },
  { name: 'ESLint', color: '#4B32C3', description: '代码质量检查工具' },
  { name: 'Prettier', color: '#F7B93E', description: '代码格式化工具' },
  { name: 'ECharts', color: '#AA344D', description: '数据可视化图表库' },
  { name: 'Lodash', color: '#3492FF', description: 'JavaScript工具库' },
  { name: 'Day.js', color: '#FF6B6B', description: '轻量级日期处理库' },
];

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);
  const option = {
    title: {
      text: '技术栈使用情况',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '技术栈',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Vue 3' },
          { value: 735, name: 'TypeScript' },
          { value: 580, name: 'Vite' },
          { value: 484, name: 'Element Plus' },
          { value: 300, name: 'TailwindCSS' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  chart.setOption(option);
};

// 更新时间
const updateTime = () => {
  currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
};

onMounted(() => {
  initChart();
  // 每秒更新时间
  setInterval(updateTime, 1000);
});
</script>

<template>
  <div class="space-y-6 p-6">
    <!-- 标题区域 -->
    <div class="text-center">
      <h1 class="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
        {{ msg || 'Vue3 + TypeScript 项目模板' }}
      </h1>
      <p class="text-lg text-gray-600 dark:text-gray-300">基于 Vite 构建的现代化前端开发环境</p>
    </div>

    <!-- 功能演示区域 -->
    <el-card class="w-full">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold">功能演示</span>
          <el-space>
            <span class="text-sm text-gray-500">暗黑模式</span>
            <el-switch v-model="isDark" @change="toggleDark()" />
          </el-space>
        </div>
      </template>

      <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
        <!-- 计数器 -->
        <div class="space-y-4">
          <h3 class="text-lg font-medium">响应式数据 & 计算属性</h3>
          <div class="flex items-center space-x-4">
            <el-button type="primary" @click="count++"> 点击计数: {{ count }} </el-button>
            <el-button type="success" @click="debouncedIncrement"> 防抖计数 (Lodash) </el-button>
          </div>
          <p class="text-sm text-gray-600">
            双倍计数 (computed): <span class="font-semibold">{{ doubleCount }}</span>
          </p>
        </div>

        <!-- 时间显示 -->
        <div class="space-y-4">
          <h3 class="text-lg font-medium">时间处理 (Day.js)</h3>
          <div class="rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
            <p class="font-mono text-sm">{{ currentTime }}</p>
            <p class="mt-1 text-xs text-gray-500">相对时间: {{ dayjs().fromNow() }}</p>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 技术栈展示 -->
    <el-card class="w-full">
      <template #header>
        <span class="text-lg font-semibold">技术栈</span>
      </template>

      <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
        <div
          v-for="tech in techStack"
          :key="tech.name"
          class="rounded-lg border border-gray-200 p-4 transition-shadow hover:shadow-md dark:border-gray-700"
        >
          <el-tag :color="tech.color" class="mb-2 text-white">
            {{ tech.name }}
          </el-tag>
          <p class="text-xs text-gray-600 dark:text-gray-400">
            {{ tech.description }}
          </p>
        </div>
      </div>

      <el-divider content-position="center">数据可视化 (ECharts)</el-divider>

      <div ref="chartRef" class="h-80 w-full"></div>
    </el-card>

    <!-- 开发工具说明 -->
    <el-card class="w-full">
      <template #header>
        <span class="text-lg font-semibold">开发工具配置</span>
      </template>

      <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
        <div>
          <h4 class="mb-2 font-medium">代码质量</h4>
          <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
            <li>✅ ESLint - 代码检查</li>
            <li>✅ Prettier - 代码格式化</li>
            <li>✅ TypeScript - 类型检查</li>
            <li>✅ Husky - Git钩子</li>
            <li>✅ Lint-staged - 暂存区检查</li>
          </ul>
        </div>

        <div>
          <h4 class="mb-2 font-medium">提交规范</h4>
          <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
            <li>✅ Commitlint - 提交信息检查</li>
            <li>✅ Commitizen - 交互式提交</li>
            <li>✅ 支持 emoji 提交类型</li>
            <li>✅ 自动化提交校验</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.dark {
  color-scheme: dark;
}
</style>
